<script setup>
// ref作用：将某数据（简单数据类型，复杂数据类型）转换为响应式对象
// 用法： 1：导入  2：调用  const xxx = ref(10)  3：返回值:{value:传入数据}  xxx.value
// template:使用可以省略value(一定不要写，不写一定正确，写了可能出错)  {{xxx}}
// js:一定不能省value

import { ref } from 'vue'

const num = ref(10)
const add = () => {
  num.value++
}
const userinfo = ref({
  username: '张三',
  age: 18
})
// userinfo:{
//   value:{
//     username: '张三',
//     age: 18
// }
// }
const addAge = () => {
  userinfo.value.age++
}
</script>

<template>
  <div>
    <div>{{ num }}</div>
    <button @click="add">修改num</button>
    <hr />
    <div>{{ userinfo.username }}</div>
    <div>{{ userinfo.age }}</div>
    <button @click="addAge">修改age</button>
  </div>
</template>
